<template>
  <div class="app-container">
    <el-tabs v-model="typeCode" class="demo-tabs" @tab-change="typeCodeChange">
      <el-tab-pane :label="`工厂升阶（${getUnauditedlistNum}）`" name="1"></el-tab-pane>
      <el-tab-pane label="租户结算" name="2"></el-tab-pane>
    </el-tabs>
    <el-radio-group v-if="typeCode == 1" v-model="tabsRadio" @change="radioChange">
      <el-radio-button :label="'待审核' + '（' + `${getUnauditedlistNum}` + '）'" value="1" />
      <el-radio-button label="已审核" value="2" />
    </el-radio-group>
    <el-form class="alone-business" :model="query" ref="queryBusinessRef" :inline="true" label-width="68px">
      <el-form-item v-if="typeCode == 1" label="工厂名称">
        <el-input v-model="query.factoryName" placeholder="请输入" clearable style="width: 240px"></el-input>
      </el-form-item>
      <template v-if="typeCode == 2">
        <el-form-item label="租户名称">
          <el-input v-model="query.tenantName" placeholder="请输入" clearable style="width: 240px"></el-input>
        </el-form-item>
        <el-form-item label="申请人">
          <el-input v-model="query.applyUserName" placeholder="请输入" clearable style="width: 240px"></el-input>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="searchData">查询</el-button>
        <el-button icon="Refresh" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 工厂升阶审核 -->
    <template v-if="typeCode == 1">
      <!-- 待审核 -->
      <template v-if="tabsRadio == 1">
        <el-table v-loading="tableLoading" :data="tableData" highlight-current-row style="width: 100%; margin-top: 20px">
          <el-table-column label="序号" type="index" width="50" />
          <el-table-column property="factoryName" label="工厂名称" width="250" />
          <el-table-column property="factoryNextLevelAmount" label="阶梯等级" />
          <el-table-column property="nextLevelRatio" label="平台返点" />
          <el-table-column property="upgradeDepositAmount" label="需给平台补返金额" />
          <el-table-column property="factoryRemainingDeposit" label="工厂保证金" />
          <el-table-column property="crossingTime" label="达成阶梯时间" width="120" />
          <el-table-column fixed="right" label="操作" width="220">
            <template #default="scope">
              <el-button link type="primary" :loading="downLoading" @click="openMarketing(scope.row)"> 下载支付流水 </el-button>
              <el-button link type="primary" @click="openDialog(scope.row)"> 确认升阶 </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 已审核 -->
      <template v-if="tabsRadio == 2">
        <el-table v-loading="tableLoading" :data="tableData" highlight-current-row style="width: 100%; margin-top: 20px">
          <el-table-column label="序号" type="index" width="50" />
          <el-table-column property="factoryName" label="工厂名称" width="250" />
          <el-table-column property="factoryNextLevelAmount" label="阶梯等级" />
          <el-table-column property="upgradeDepositAmount" label="给平台补返金额" />
          <el-table-column property="crossingTime" label="达成阶梯时间" width="120" />
          <el-table-column property="auditTime" label="审核时间" width="120" />
          <el-table-column property="auditNickName" label="审核人" />
        </el-table>
      </template>
    </template>
    <!-- 商家结算 -->
    <template v-if="typeCode == 2">
      <!-- 结算 -->
      <el-table v-loading="tableLoading" :data="tableData" highlight-current-row style="width: 100%; margin-top: 20px">
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column property="tenantName" label="租户名称" width="250" />
        <el-table-column label="状态">
          <template #default="scope">
            <div>{{ scope.row.applyStatus == 1 ? "结算中" : scope.row.applyStatus == 2 ? "已结算" : "-" }}</div>
          </template>
        </el-table-column>
        <el-table-column property="applyUserName" label="申请人" />
        <el-table-column property="applySubmitTime" label="申请时间" width="120" />
        <el-table-column property="applyAmount" label="申请金额" />
        <el-table-column property="successTime" label="到账时间" />
      </el-table>
    </template>

    <pagination :total="listTotal" v-model:page="query.current" v-model:limit="query.size" @pagination="searchData" />

    <!-- 确定升阶 弹窗 -->
    <el-dialog v-model="dialogValue" :close-on-click-modal="false" width="474" align-center title="" @close="closeDialog">
      <div style="text-align: center">
        <el-icon color="#F56C6C" size="70"><Warning /></el-icon>
      </div>
      <div style="text-align: center; margin-top: 40px; margin-bottom: 30px">
        请确认已准确核对商家采购单数据，并对工厂进行升阶
      </div>
      <template #footer>
        <div style="text-align: center">
          <el-button class="btn" @click="closeDialog">取消</el-button>
          <el-button class="btn" :loading="dialogBtnLoading" type="primary" @click="dialogSure"> 确定并升阶 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {
  getUnaudited,
  getAudited,
  upgradeRecordId,
  payDetailExport,
  settlementManagePage
} from "@/api/system/rebateRules/ladderSettlement";
import { ref } from "vue";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();

const typeCode = ref("1");
const tabsRadio = ref("1");
const query = ref({
  factoryName: "",
  businessName: "",
  applicant: "",
  tenantName: "",
  applyUserName: "",
  current: 1,
  size: 10
});
const tableLoading = ref(false);
const tableData = ref([]);
const listTotal = ref(0);
const dialogValue = ref(false);
const dialogBtnLoading = ref(false);
const sureRow = ref({});
const typeCodeChange = value => {
  tabsRadio.value = "1";
  reset();
};

const radioChange = value => {
  tableData.value = [];
  if (typeCode.value == 1) {
    value == 1 ? getUnauditedlist() : getAuditedlist();
  }
  reset();
};

// 查询
const searchData = () => {
  pageListJudge();
};

const getUnauditedlistNum = ref(0);
//查询待审核
const getUnauditedlist = async () => {
  const { code, data } = await getUnaudited(query.value);
  if (code == 200) {
    tableData.value = data.list;
    listTotal.value = data.total;
    getUnauditedlistNum.value = data.total;
  }
  tableLoading.value = false;
};
//查询已审核
const getAuditedlist = async () => {
  const { code, data } = await getAudited(query.value);
  if (code == 200) {
    tableData.value = data.list;
    listTotal.value = data.total;
  }
  tableLoading.value = false;
};

//租户结算
const settlementManagePageApi = async () => {
  const { code, data } = await settlementManagePage(query.value);
  if (code == 200) {
    tableData.value = data.list;
    listTotal.value = data.total;
  }
  tableLoading.value = false;
};
// 搜索重置
const reset = () => {
  query.value = {
    factoryName: "",
    businessName: "",
    applicant: "",
    current: 1,
    size: 10
  };
  pageListJudge();
};

// 单独设置商家列表--判断查询
const pageListJudge = () => {
  tableLoading.value = true;
  if (typeCode.value == 1) {
    // 工厂升阶审核
    if (tabsRadio.value == 1) {
      // 待审核
      getUnauditedlist();
    } else if (tabsRadio.value == 2) {
      // 已审核
      getAuditedlist();
    }
  } else if (typeCode.value == 2) {
    // 商家结算失败
    settlementManagePageApi();
  }
};

// 打开确认升阶弹窗
const openDialog = row => {
  sureRow.value = row;
  dialogValue.value = true;
};
// 关闭确认升阶弹窗
const closeDialog = () => {
  dialogValue.value = false;
};
// 升阶弹窗-确认
const dialogSure = async () => {
  const { code } = await upgradeRecordId(sureRow.value.upgradeRecordId);
  code == 200 && ElMessage.success("升阶成功");
  closeDialog();
  pageListJudge();
};

const downLoading = ref(false);
const openMarketing = row => {
  downLoading.value = true;
  payDetailExport({ upgradeRecordId: row.upgradeRecordId })
    .then(res => {
      proxy.getFileDownload(res, `支付流水${new Date().getTime()}.xlsx`);
    })
    .finally(() => {
      downLoading.value = false;
    });
};

getUnauditedlist();
</script>
<style scoped lang="scss">
.alone-business {
  margin-top: 20px;
}
</style>
